import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:meiyunapp/common/font_style.dart';
import 'package:meiyunapp/component/home_type_component.dart';
import 'package:meiyunapp/component/hot_store_goods_component.dart';
import 'package:meiyunapp/component/swiper_component.dart';
import 'package:meiyunapp/page/collection/home_collection.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with AutomaticKeepAliveClientMixin {
  HomeCollection collection = Get.put(HomeCollection());

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return GetBuilder<HomeCollection>(
        init: HomeCollection(),
        builder: (controller) {
          if (controller.homeData == null) {
            return const Center(child: CupertinoActivityIndicator());
          } else {
            return Stack(
              children: [
                Container(
                  width: double.infinity,
                  height: 80 + MediaQuery.of(context).padding.top,
                  color: Colors.red,
                ),
                Positioned(
                  top: 20 + MediaQuery.of(context).padding.top,
                  width: MediaQuery.of(context).size.width,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 15),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: const [
                        Text("上海", style: AppFontStyles.style_black_15_2),
                        Text("消息", style: AppFontStyles.style_black_15_2),
                      ],
                    ),
                  ),
                ),
                Container(
                  width: double.infinity,
                  margin: EdgeInsets.only(
                      top: 45 + MediaQuery.of(context).padding.top),
                  height: MediaQuery.of(context).size.height,
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(40),
                        topRight: Radius.circular(40)),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      //搜索栏
                      Container(
                        margin: const EdgeInsets.symmetric(
                            horizontal: 20, vertical: 15),
                        decoration: BoxDecoration(
                            color: Colors.black12,
                            borderRadius: BorderRadius.circular(20)),
                        width: MediaQuery.of(context).size.width,
                        height: 40,
                        alignment: Alignment.center,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: const [
                            Icon(Icons.search),
                            SizedBox(
                              width: 5,
                            ),
                            Text("请输入查数据2"),
                          ],
                        ),
                      ),
                      Expanded(
                          flex: 1,
                          child: SingleChildScrollView(
                            physics: const AlwaysScrollableScrollPhysics(),
                            child: Column(
                              children: [
                                //轮播图
                                SwiperComponent(controller.homeData?.banners),
                                //分类
                                HomeTypeComponent(
                                    controller.homeData?.categories),
                                Container(
                                  width: double.infinity,
                                  height: 40,
                                  color: Colors.black26,
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(left: 10),
                                  child: const Text(
                                    "附近美店",
                                    style: TextStyle(fontSize: 16),
                                  ),
                                ),
                                const HotStoreGoodsComponent()
                              ],
                            ),
                          ))
                    ],
                  ),
                )
              ],
            );
          }
        });
  }

  @override
  bool get wantKeepAlive => true;
}
